<!-- 学社 - 学社主页 - 答疑组件 -->
<template>
  <view class="px-4">
    <!-- 顶部 -->
    <view class="flex h-80 mt-5">
      <u-image class="flex-shrink-0" shape="circle" width="80" height="80" :src="data.avatar" @click="toHomePage(data.user_id)"></u-image>
      <view class="flex-1 flex flex-col justify-between mx-3 h-76 text-single">
        <view class="flex items-center">
          <view class="c-#333 text-32 text-single" @click="toHomePage(data.user_id)">{{ data?.nickname }}</view>
          <view v-if="data.member_position > 0" class="tag-identity mx-2 flex-shrink-0">{{ identity }}</view>
          <image v-if="data.vip_level > 0" mode="aspectFit" :class="['flex-shrink-0',data.vip_level > 1 ? 'w-140 h-40' : 'w-112 h-28']"
            :src="`/static/images/user/ic_vip_tag_${vipIcon}.png`" />
        </view>
        <view class="c-#999 text-24">{{ data?.createtime }}</view>
      </view>
      <!-- 社长管理员才能操作 -->
      <view v-if="member_position >= 2" class="flex justify-end flex-shrink-0">
        <view class="btn-top" @click="onTopSwitch(data.id, data.is_top)">{{ data.is_top ? '取消置顶' : '置顶' }}</view>
      </view>
    </view>
    <!-- 问题 -->
    <view class="question-card">
      <!-- 提问人 -->
      <view class="mt-6 text-sm c-#666">
        {{ data.type == 2 ? '提问' : '回复' }}
        <text v-for="(item, index) in data.at_info" :key="index" class="c-#F4AF22 mr-2" @click="toHomePage(item.id)">@{{ item.nickname }}</text>
      </view>
      <!-- 标题 -->
      <view class="mt-2 mb-5 c-#333 text-sm font-bold">
        <view v-if="data.type == 3" @click="onQuestionClick(data)">
          {{ !data.question ? '提问已被删除' : data.question?.content }}
        </view>
        <view v-else-if="data.type == 2" @click="navigate(`/package_society/pages/trend/question/detail?id=${data.id}`)">
          {{ data.content }}
        </view>

      </view>
      <!-- 描述 -->
      <view v-if="data.type == 2" class="c-#666 text-sm mb-3"
        @click="navigate(`/package_society/pages/trend/question/detail?id=${data.id}`)">
        {{ data.remark }}</view>
      <view v-if="data.type == 3" class="c-#666 text-sm mb-3"
        @click="navigate(`/package_society/pages/trend/answer/detail?id=${data.id}`)">
        {{ data.content }}</view>
      <u-image v-if="isSingleQuestionImg" border-radius="10" width="100%" height="352" :src="data.slideshow[0]"
        @click="previewImage(data.slideshow, 0)"></u-image>
      <view v-else class="grid grid-cols-3 gap-3">
        <u-image width="196" height="196" border-radius="16" v-for="(answerImg, answerIndex) in data.slideshow"
          :key="answerIndex" :src="answerImg" @click="previewImage(data.slideshow, index)" />
      </view>
      <view v-if="data.type == 2" class="c-#999 text-28 mt-3">
        {{ data.answer_num && data.answer_num > 0 ? `${data.answer_num}个回答` : '暂无回答' }}
      </view>
      <!-- 回答按钮 只有被提问人可以看到 -->
      <template v-if="data.type == 2 && data.need_answer == 1">
        <view class="mt-2 mb-3">
          <u-line color="#F5F5F5" />
        </view>
        <view class="text-center">
          <view class="c-#F4AF22 text-28" @click="onAnswer">回答</view>
        </view>
      </template>
      <!-- 评论/点赞 -->
      <template v-if="data.type == 3">
        <view class="flex justify-end items-center c-#999 text-24 mt-3">
          <view class="flex items-center" @click="navigate(`/package_society/pages/trend/answer/detail?id=${data.id}`)">
            <u-image width="38" height="34" src="/static/images/home/ic_trend_comment.png"></u-image>
            <view class="ml-1">{{ data?.comment_num }}</view>
          </view>
          <view class="flex items-center ml-3">
            <image class="w-42 h-36" @click="onLikeSwitch(data.id, data.is_like)"
              :src="`/static/images/home/ic_trend_${data.is_like ? 'like' : 'nolike'}.jpg`"></image>
            <view class="ml-1">{{ data?.like_num }}</view>
          </view>
        </view>
      </template>
    </view>
  </view>
</template>
<script setup>
import { navigate, showToast, previewImage } from "@/common/util/uni";
import { toHomePage } from "@/common/util/util";
import { societyIdentity, vipLevels } from '@/common/constant/society.js'
import { postQuestionSetTop, postAnswerGiveLike, postAnswerCancelLike } from '@/common/http/module/society.js'
import { useUserStore } from '@/store/user'

const userStore = useUserStore()
const emit = defineEmits(['refresh'])
const props = defineProps({
  data: Object,
  member_position: [String, Number], // 用户在该学社身份,
  club_id: [String, Number] // 学社id
})

// 身份&会员标签
const vipIcon = computed(() => vipLevels.find(v => v.value == props.data.vip_level)?.icon)
const identity = computed(() =>societyIdentity.find(v => v.value == props.data.member_position)?.label)
// 是否单张图片
const isSingleQuestionImg = computed(() => props.data?.slideshow.length == 1)
// 被艾特人id集合
const atIds = computed(() => {
  return props.data.at_info ? props.data.at_info.map(v => v.id) : []
})
const userInfo = computed(() => userStore.userInfo)

// 回答
function onAnswer () {
  navigate(`/package_society/pages/trend/answer/add?question_id=${props.data.id}&club_id=${props.club_id}`)
}

// 是否置顶
function onTopSwitch (answer_id, is_top) {
  postQuestionSetTop({
    dynamic_id: answer_id,
    action: is_top ? 'cancel' : 'top'
  }).then(() => {
    showToast(`${is_top ? '取消置顶' : '置顶'}成功`)
    emit('refresh')
  })
}

function onQuestionClick(data) {
  if (data.question) {
    navigate(`/package_society/pages/trend/question/detail?id=${data.question_id}`)
  } else {
    showToast('该提问已被删除')
  }
}

// 点赞
function onLikeSwitch (answer_id, is_like) {
  const postMethods = is_like ? postAnswerCancelLike : postAnswerGiveLike
  postMethods({ answer_id }).then(() => {
    showToast(`${is_like ? '取消点赞' : '点赞'}成功`)
    emit('refresh')
  })
}
</script>

<style lang="scss" scoped>
.question-card {
  padding: 20rpx 30rpx;
  border-radius: 6px;
  background-color: #FFFFFF;
  box-shadow: -1.2246468525851679e-16px 2px 6px 0px rgba(206, 143, 12, 0.1);
}

.btn-top {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6rpx 20rpx;
  height: 48rpx;
  border-radius: 12rpx;
  background: linear-gradient(-180deg, rgba(248, 220, 97, 1) 0%, rgba(244, 174, 32, 1) 100%);
  color: #FFFFFF;
  font-size: 28rpx;
}
</style>
